React, Angular, বা Vue.js এর সাথে ASP.NET Core API ইন্টিগ্রেশন

React, Angular, এবং Vue.js হল জনপ্রিয় ফ্রন্ট-এন্ড JavaScript ফ্রেমওয়ার্ক এবং লাইব্রেরি, যা ASP.NET Core API এর সাথে ইন্টিগ্রেট করে শক্তিশালী এবং স্কেলেবল ওয়েব অ্যাপ্লিকেশন তৈরি করতে ব্যবহৃত হয়। ASP.NET Core একটি শক্তিশালী এবং দ্রুত API সেবা প্রদান করে, এবং React, Angular, বা Vue.js এর মাধ্যমে এটি ব্যবহারকারী ইন্টারফেসে ডেটা প্রদর্শন করতে সাহায্য করে।

এখানে, আমরা দেখবো কিভাবে ASP.NET Core Web API এবং React, Angular, বা Vue.js এর মধ্যে ইন্টিগ্রেশন করা যায়।

ASP.NET Core API তৈরি করা

প্রথমে, আপনাকে একটি ASP.NET Core Web API তৈরি করতে হবে। আমরা একটি সাধারণ Products API তৈরি করব, যা React, Angular, বা Vue.js এর সাথে যোগাযোগ করবে।

1. ASP.NET Core API তৈরি করা

1. নতুন ASP.NET Core API প্রজেক্ট তৈরি করুন:

   • Visual Studio বা dotnet CLI ব্যবহার করে একটি নতুন Web API প্রজেক্ট তৈরি করুন।

   dotnet new webapi -n MyApi
   

2. API Controller তৈরি করা: একটি ProductController তৈরি করুন, যা ডেটা প্রদান করবে।

   [Route("api/[controller]")]
   [ApiController]
   public class ProductsController : ControllerBase
   {
       private static List<Product> _products = new List<Product>
       {
           new Product { Id = 1, Name = "Product 1", Price = 100 },
           new Product { Id = 2, Name = "Product 2", Price = 200 }
       };
   
       [HttpGet]
       public ActionResult<List<Product>> GetProducts()
       {
           return Ok(_products);
       }
   
       [HttpGet("{id}")]
       public ActionResult<Product> GetProduct(int id)
       {
           var product = _products.FirstOrDefault(p => p.Id == id);
           if (product == null)
               return NotFound();
   
           return Ok(product);
       }
   }
   
   public class Product
   {
       public int Id { get; set; }
       public string Name { get; set; }
       public decimal Price { get; set; }
   }
   

   এখানে, ProductsController একটি API তৈরি করেছে যা ডেটার তালিকা প্রদান করবে এবং প্রতিটি পণ্য প্রদর্শন করবে।

3. CORS কনফিগারেশন: আপনি যদি ফ্রন্ট-এন্ড অ্যাপ্লিকেশন (যেমন React, Angular, বা Vue.js) আলাদা সার্ভারে চালান, তবে আপনাকে CORS (Cross-Origin Resource Sharing) কনফিগার করতে হবে। এটি করার জন্য, ConfigureServices মেথডে নিচের কোডটি যোগ করুন:

   public void ConfigureServices(IServiceCollection services)
   {
       services.AddCors(options =>
       {
           options.AddPolicy("AllowAll", builder =>
               builder.AllowAnyOrigin()
                      .AllowAnyMethod()
                      .AllowAnyHeader());
       });
   
       services.AddControllers();
   }
   

   এবং Configure মেথডে CORS ব্যবহার করুন:

   public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
   {
       app.UseCors("AllowAll");
   
       app.UseRouting();
   
       app.UseEndpoints(endpoints =>
       {
           endpoints.MapControllers();
       });
   }
   

React এর সাথে ASP.NET Core API ইন্টিগ্রেশন

React ব্যবহার করে আপনি সহজেই ASP.NET Core API এর সাথে যোগাযোগ করতে পারেন। React অ্যাপ্লিকেশন তৈরি করতে create-react-app ব্যবহার করা হয়, যা একটি প্রাথমিক React অ্যাপ তৈরি করবে।

1. React অ্যাপ তৈরি করা

1. নতুন React অ্যাপ তৈরি করুন:

   • আপনি create-react-app ব্যবহার করে নতুন React অ্যাপ তৈরি করতে পারেন।

   npx create-react-app my-react-app
   cd my-react-app
   

2. API কল করা: axios অথবা fetch ব্যবহার করে ASP.NET Core API এর সাথে যোগাযোগ করা হয়। এখানে আমরা axios ব্যবহার করব।

   axios ইনস্টল করুন:

   npm install axios
   

   API কল করার উদাহরণ:

   import React, { useEffect, useState } from 'react';
   import axios from 'axios';
   
   function App() {
     const [products, setProducts] = useState([]);
   
     useEffect(() => {
       axios.get('https://localhost:5001/api/products')
         .then(response => setProducts(response.data))
         .catch(error => console.log('Error fetching products:', error));
     }, []);
   
     return (
       <div className="App">
         <h1>Products</h1>
         <ul>
           {products.map(product => (
             <li key={product.id}>{product.name} - ${product.price}</li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;
   

   এখানে, useEffect হুক ব্যবহার করে axios থেকে API কল করা হচ্ছে এবং প্রাপ্ত ডেটা setProducts মাধ্যমে স্টেটে সেভ করা হচ্ছে।

Angular এর সাথে ASP.NET Core API ইন্টিগ্রেশন

Angular একটি পূর্ণাঙ্গ ফ্রেমওয়ার্ক, যেখানে HTTP ক্লায়েন্ট সার্ভিস ব্যবহার করে API কল করা হয়।

1. Angular অ্যাপ তৈরি করা

1. Angular অ্যাপ তৈরি করুন: Angular CLI ব্যবহার করে একটি নতুন অ্যাপ তৈরি করুন:

   ng new my-angular-app
   cd my-angular-app
   

2. HttpClientModule ইমপোর্ট করা: app.module.ts ফাইলে HttpClientModule ইমপোর্ট করুন:

   import { HttpClientModule } from '@angular/common/http';
   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule,
       HttpClientModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

3. API কল করা: app.component.ts ফাইলে API কল করুন:

   import { Component, OnInit } from '@angular/core';
   import { HttpClient } from '@angular/common/http';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent implements OnInit {
     products: any[] = [];
   
     constructor(private http: HttpClient) {}
   
     ngOnInit() {
       this.http.get<any[]>('https://localhost:5001/api/products')
         .subscribe(data => {
           this.products = data;
         });
     }
   }
   

Vue.js এর সাথে ASP.NET Core API ইন্টিগ্রেশন

Vue.js একটি প্রগতিশীল JavaScript ফ্রেমওয়ার্ক, যা API এর সাথে সংযোগ করতে সহজ এবং দ্রুত।

1. Vue.js অ্যাপ তৈরি করা

1. Vue CLI ইনস্টল করুন:

   npm install -g @vue/cli
   

2. নতুন Vue অ্যাপ তৈরি করুন:

   vue create my-vue-app
   cd my-vue-app
   

3. API কল করা: axios ব্যবহার করে Vue.js থেকে API কল করা হয়। প্রথমে axios ইনস্টল করুন:

   npm install axios
   

   এরপর, App.vue ফাইলে API কল করুন:

   <template>
     <div id="app">
       <h1>Products</h1>
       <ul>
         <li v-for="product in products" :key="product.id">
           {{ product.name }} - ${{ product.price }}
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
       return {
         products: []
       };
     },
     mounted() {
       axios.get('https://localhost:5001/api/products')
         .then(response => {
           this.products = response.data;
         })
         .catch(error => {
           console.log('Error:', error);
         });
     }
   };
   </script>
   

সারাংশ

React, Angular, এবং Vue.js এর সাথে ASP.NET Core API ইন্টিগ্রেশন খুবই সহজ এবং কার্যকরী। আপনি axios অথবা HttpClient ব্যবহার করে API কল করতে পারেন এবং ডেটা ব্যবহারকারীর ইন্টারফেসে প্রদর্শন করতে পারেন। এই ইন্টিগ্রেশন আপনাকে একটি ফ্রন্ট-এন্ড এবং ব্যাক-এন্ড সিস্টেম তৈরি করতে সাহায্য করে, যা একে অপরের সাথে যোগাযোগ করতে পারে এবং ডাইনামিক ডেটা প্রদর্শন করতে পারে।